import React, { forwardRef, useState } from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select
function UserForm(props, ref) {
  const [isDisabled, setisDisabled] = useState(props.isUpdateDisabled)
  console.log(props.isUpdateDisabled)
  const { roleId, region } = JSON.parse(localStorage.getItem('token'))
  const roleObj = {
    1: 'superadmin',
    2: 'admin',
    3: 'editor',
  }
  // 控制区域下拉菜单是否为disabled
  const checkRegionDisabled = (row) => {
    if (props.isUpdate) {
      //从父组件UserList穿过来的isUpdate为true，说明是编辑事件
      if (roleObj[roleId] === 'superadmin') {
        //说明是超级管理员，返回false，下拉菜单可以使用
        return false
      } else {
        return true
      }
    } else {
      // 如果是添加事件--->走下面流程
      if (roleObj[roleId] === 'superadmin') {
        //说明是超级管理员，返回false，下拉菜单可以使用
        return false
      } else {
        // 判断当前选中的value值（区域名）是否等于本地存储里打名字
        return row.value !== region
      }
    }
  }
  // 控制角色下拉菜单是否为disabled
  const checkRoleDisabled = (row) => {
    if (props.isUpdate) {
      //从父组件UserList穿过来的isUpdate为true，说明是编辑事件
      if (roleObj[roleId] === 'superadmin') {
        //说明是超级管理员，返回false，下拉菜单可以使用
        return false
      } else {
        return true
      }
    } else {
      // 如果是添加事件--->走下面流程
      if (roleObj[roleId] === 'superadmin') {
        //说明是超级管理员，返回false，下拉菜单可以使用
        return false
      } else {
        // 如果当前的row.id是1 || 2 || 3，分别代表超级管理员 || admin || 小编辑
        return roleObj[row.id] !== 'editor'
      }
    }
  }
  return (
    <Form
      // form={form}
      layout="vertical"
      ref={ref}
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={
          ref.current?.getFieldValue('roleId') === 1
            ? []
            : [
                {
                  required: true,
                  message: '请设置角色',
                },
              ]
        }
      >
        <Select disabled={isDisabled}>
          {props.regionList.map((item) => (
            <Option
              value={item.value}
              key={item.id}
              disabled={checkRegionDisabled(item)}
            >
              {item.label}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: '请设置角色',
          },
        ]}
      >
        <Select
          onChange={(value) => {
            if (value === 1) {
              setisDisabled(true)
              ref.current.setFieldsValue({ region: '' }) //清空区域表单里的数据
            } else {
              setisDisabled(false)
            }
          }}
        >
          {props.roleList.map((item) => (
            <Option
              value={item.id}
              key={item.id}
              disabled={checkRoleDisabled(item)}
            >
              {item.roleName}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  )
}

export default forwardRef(UserForm)
